<template>
  <div class="pickers">
    <vuePickers :data="pickData"
      @cancel="cancel"
      @confirm="confirm"
      :showToolbar="true"
      :maskClick="false"
      :visible.sync="pickerVisible"
    />
    <div class="result" @click="pickerVisible = true">{{result}}<img class="down" src="/static/images/select.png"/></div>
  </div>
</template>
<script>
import vuePickers from 'vue-pickers'
export default {
  components: { vuePickers },
  data () {
    let tdata = []
    let value = ['深圳 Shenzhen','北京 Beijing','上海 Shanghai','西安 Xian','武汉 Wuhan','苏州 Suzhou']
    for (let i = 0; i < value.length; i++) {
      tdata.push({
        label: `${value[i]}`
      })
    }
    return {
      pickerVisible: false,
      pickData: [ tdata ],
      result: value[0]
    }
  },
  methods: {
    cancel () {
      // console.log('cancel')
      return
    },
    confirm (res) {
      // this.result = JSON.stringify(res)
      //console.log(res[0].label)
      this.result = res[0].label
    }
  }
}
</script>
<style lang="less">
  .pickers{
    .result{
      font-size: .64rem;
      text-align: left;
      padding-left: 1rem;
      .down{
        width: .6rem;
        height: .6rem;
        margin-left: .2rem;
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
  
</style>